<template>
    <div class="content">
        <div class="warp">
            <div class="top">
                <div class="top-content">
                    <div
                        style="border: 1px solid #EBEEF5;padding: 5px;display: inline-block;box-sizing: border-box;width: 150px;height: 150px;">
                        <el-avatar icon="el-icon-user-solid" shape="square" :size="140" :src="communityDetail.pic"
                            fit="cover"></el-avatar>
                    </div>

                    <div class="community-info">
                        <div class="community-info-content">
                            <div style="margin-bottom: 10px;">
                                <span style="font-size: 22px;color:#333;vertical-align: middle;cursor:pointer" @click="$router.push({path:'/community',query:{id:communityDetail.id}})">
                                    {{ communityDetail.name }}社区
                                </span>
                                <span
                                    style="display: inline-block;text-align: center;vertical-align: middle;width: 125px;">
                                    <el-button v-show="!isJoined" size="mini" type="primary" icon="el-icon-plus"
                                        @click="joinClick($event)">关注</el-button>
                                    <el-button v-show="isJoined" size="mini" plain icon="el-icon-check"
                                        @click="cancelClick($event)">已关注&ensp;|&ensp;取消</el-button>
                                </span>
                                <span style="font-size:12px;color: #AAA;margin-left: 20px;margin-right:5px">
                                    关注:
                                </span>
                                <span style="font-size: 12px;color:#FF7F3E">{{ communityDetail.joinNum }}</span>
                                <span style="font-size:12px;color: #AAA;margin-left: 20px;margin-right:5px">
                                    帖子:
                                </span>
                                <span style="font-size: 12px;color:#FF7F3E">{{ communityDetail.postNum }}</span>
                            </div>
                            <span style="font-size: 14px;color: #4c4c4c;">
                                {{ communityDetail.remark }}
                            </span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="main-warp">

                <el-container>





                    <el-container class="list-container">
                        <div
                            style="border: 1px solid #e4e6eb;padding-top: 20px;background-color: white;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;">
                            <el-header height="60px">
                                <el-page-header @back="$router.back()" content="帖子详情"></el-page-header>
                            </el-header>
                            <el-main >

                                <post-detail-item :user="myMemberInfo.userInfo" :isMy="isMy" :detail="postInfo"></post-detail-item>
                            </el-main>
                        </div>
                        <div class="comment-warp">
                            <comment-list></comment-list>
                        </div>

                    </el-container>
                    <!-- <el-aside class="community-aside" width="300px">

                        <div style="padding:20px 0px 20px 20px;border-bottom: 1px solid #e4e6eb;">
                            <span class="aside-lable">成员信息</span>
                            <div class="member-info" v-if="isJoined" style="margin-top: 10px;display: flex;">
                                <div style="display:inline-block">
                                    <el-avatar icon="el-icon-user-solid" :size="100" shape="square"
                                        :src="myMemberInfo.userInfo.avatar" fit="fill"></el-avatar>
                                </div>
                                <div style="display: inline-block;flex:1;margin-left: 15px;">
                                    <span style="display: block;margin-bottom: 5px;"><i
                                            class="el-icon-user"></i>&ensp;{{ myMemberInfo.userInfo.nickName ??
                            myMemberInfo.userInfo.userName }}</span>
                                    <span style="display:block"><i class="el-icon-coin"></i>&ensp;{{
                            myMemberInfo.userInfo.integral ?? 0 }}</span>
                                    <span style="display:block"><i class="el-icon-medal"></i>&ensp;LV&nbsp;{{
                            myMemberInfo.levelInfo.level ?? 0 }}</span>
                                    <div style="width:90%">
                                        <span style="font-size: 12px;display: block;margin:5px 0px">经验值：</span>
                                        <el-progress :text-inside="true" :stroke-width="20" :percentage="ExpPercentage"
                                            :format="expFormat"></el-progress>
                                    </div>
                                </div>

                            </div>
                            <div v-else
                                style="display:flex;flex-direction: column;align-items:center;justify-content:center;height: 80px;">
                                <span style="color: #AAA;">请先关注社区</span>
                            </div>
                        </div>
                        <div style="padding:20px 20px 20px 20px;border-bottom: 1px solid #e4e6eb;">
                            <span class="aside-lable">帖子操作</span>
                            <div v-if="isJoined" style="margin-top: 20px;display: flex;justify-content: space-around;">

                            </div>
                            <div v-else
                                style="display:flex;flex-direction: column;align-items:center;justify-content:center;height: 80px;">
                                <span style="color: #AAA;">请先关注社区</span>
                            </div>
                        </div>

                    </el-aside> -->



                </el-container>
            </div>

        </div>
    </div>
</template>

<script>
import * as API from "@/api/community/community"
import * as PostAPI from "@/api/post/post"
import { isJoined } from "@/api/community/community";
import router from "@/router";
import PostListCard from "@/components/PostListCard"
import * as SectionAPI from '@/api/section/section';
import PostDetailItem from '@/components/PostDetailItem'
import CommentList from '@/components/CommentList'
import { updateViewCount } from '@/api/post/post';
import { clearTimeout } from 'tinymce';
export default {
    components: {
        PostListCard, PostDetailItem,CommentList
    },
    data() {
        return {
            communityDetail: {
                id: null
            },
            sectionList: [],
            isJoined: false,
            isMy:false,
            userInfo:{},
            myMemberInfo: {
                levelInfo: {},
                isAdmin: null,
                userInfo: {}
            },
            postInfo: {},
            timeout:null
        }
    },
    methods: {
        getCommunityDetail(id) {
            API.getCommunityById(id).then(res => {
                this.communityDetail = res.data;
            })
        },
        getIsJoined(communityId) {
            API.isJoined(communityId).then((res) => {
                this.isJoined = res.data.isJoined;
                console.log(res.data)
                this.myMemberInfo.levelInfo = res.data.levelInfo ?? {};
                this.myMemberInfo.isAdmin = res.data.isAdmin;
                this.myMemberInfo.userInfo = (res.data.userInfo??JSON.parse(localStorage.getItem("userInfo")))
            })
        },
        joinClick(e) {
            API.join(this.communityDetail.id).then(() => {
                this.isJoined = true;

            });
        },
        cancelClick(e) {
            API.cancelJoin(this.communityDetail.id).then(() => {
                this.isJoined = false;
            })
        },
        // loginClick(){
        //     localStorage.setItem("logUrl",this.$router.currentRoute.fullPath)
        //     this.$router.push('/login')
        // },
        expFormat(percentage) {
            return `${this.myMemberInfo.levelInfo.currExp ?? 0}/${this.myMemberInfo.levelInfo.maxExp ?? '-'}`
        },
        getPostDetail(id) {
            PostAPI.getPostDetail({ id }).then(res => {
                this.postInfo = res.data;
                this.getCommunityDetail(res.data.communityId);
                this.getIsJoined(res.data.communityId)
            })
        },
        updateViewCount(id){
            PostAPI.updateViewCount({postId:id});
        },
        getIsMy(id){
            PostAPI.isMyPost({postId:id}).then(res=>{
                console.log(res.data);
                this.isMy = res.data.isMy;
            })
        }

    },
    computed: {
        ExpPercentage() {
            if (!this.myMemberInfo.levelInfo.maxExp) {
                return 100;
            }
            return this.myMemberInfo.levelInfo.currExp / this.myMemberInfo.levelInfo.maxExp * 100;
        }
    },
    mounted() {
        // this.communityDetail.id = this.$route.query.communityId;
        this.getIsMy(this.$route.query.id);
        this.getPostDetail(this.$route.query.id);
        this.timemout = setTimeout(() => {
            this.updateViewCount(this.$route.query.id);
        }, 3000);

    },
    destroyed () {
        if(this.timeout)clearTimeout(this.timeout);
    },
}
</script>

<style lang="scss" scoped>
.content {
    width: 1146px;
    margin: auto;
    // background-color: pink;
    position: relative;
    display: flex; //必要的，否则会导致.warp元素margin-top失效
    flex-direction: column;
}

.warp {
    margin-top: 20px;
    min-height: calc(100vh - 91px);

}

.top {
    height: 200px;
    background-color: white;
    border: 1px solid #DCDFE6;

    .top-content {
        height: 100%;
        padding: 20px;
        position: relative;
        display: flex;
        align-items: flex-end;

        .community-info {
            margin-left: 20px;
            flex: 1;

            .community-info-content {
                height: 80px;
                padding-top: 15px;
            }
        }
    }
}

.main-warp {
    margin-top: 10px;

    // border: 1px solid #DCDFE6;
}

.member-info {
    // background-color: aqua;


}

.list-container {
    flex: 1;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0px 0px 0px 0px;

    min-height: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;


    /* background-color: aqua; */
}

.community-aside {
    background-color: white;
    border-top: 1px solid #e4e6eb;
    border-right: 1px solid #e4e6eb;
    border-bottom: 1px solid #e4e6eb;
}

.aside-lable {
    display: block;
    font-size: 14px;
    font-weight: 700;
    font-family: "microsoft yahei", simhei, sans-serif;
    color: #333;
}

.comment-warp {


    margin-top: 40px;
    border-radius: 10px 10px 0px 0px;
    // border: 1px solid #DCDFE6;

}

::v-deep .el-progress-bar__outer {
    border-radius: 0px !important;
}

::v-deep .el-progress-bar__inner {
    border-radius: 0px !important;
}
</style>